<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>有人智造-看板中控台</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.17/css/layui.css">

  <style>
    body{
      background: linear-gradient(to bottom right, blue, pink);
      background-image: url("/static/img/Central_Control.png");
        display: flex;
        flex-directive:column;
        min-height: 100vh;
        flex:1;
        background-size: cover;
    }
    /* 悬浮球样式 */
    .float-ball {
        position: fixed;
        left: 10%;
        top: 5%;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        text-align: center;
        line-height: 250px;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        /*line-height: 150px;*/
        /*position: relative;*/
        animation: float 2s infinite;
        background: radial-gradient(circle, #BC95C6, #7DC4CC);
    }
    .float-ball:hover{
        background: radial-gradient(circle, #FF626E, #FFBE71);
    }
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }
    .float-ball:nth-child(2) {
        position: fixed;
        left: 30%;
        top: 5%;
        cursor: pointer;
    }
    .float-ball:nth-child(3) {
        position: fixed;
        left: 50%;
        top: 5%;
        cursor: pointer;
    }
    .float-ball:nth-child(4) {
        position: fixed;
        left: 70%;
        top: 5%;
        cursor: pointer;
    }
    .float-ball:nth-child(5) {
        position: fixed;
        left: 20%;
        top: 30%;
        cursor: pointer;
    }
    .float-ball:nth-child(6) {
        position: fixed;
        left: 40%;
        top: 30%;
        cursor: pointer;
    }
    .float-ball:nth-child(7) {
        position: fixed;
        left: 60%;
        top: 30%;
        cursor: pointer;
    }
    .float-ball:nth-child(8) {
        position: fixed;
        left: 30%;
        top: 55%;
        cursor: pointer;
    }
    .float-ball:nth-child(9) {
        position: fixed;
        left: 50%;
        top: 55%;
        cursor: pointer;
    }
    .float-ball:nth-child(10) {
        position: fixed;
        left: 40%;
        top: 80%;
        cursor: pointer;
    }
  </style>
</head>
<body>
    <!-- 悬浮球 -->
    <div class="float-ball" data-id="1" >
        SMT看板
    </div>
    <div class="float-ball" data-id="2">
        DIP看板
    </div>
    <div class="float-ball" data-id="3">
        总装看板
    </div>
    <div class="float-ball" data-id="4">
        IQC看板
    </div>
    <div class="float-ball" data-id="5">
        FQC看板
    </div>
    <div class="float-ball" data-id="6">
        入库段看板
    </div>
    <div class="float-ball" data-id="7">
        领料出库
    </div>
    <div class="float-ball" data-id="8">
        销售出库
    </div>
    <div class="float-ball" data-id="9">
        工单汇总看板
    </div>
    <div class="float-ball" data-id="10">
        首检巡检看板
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>

    // 判断屏幕宽度，动态设置视口，如果是大屏幕就不设置
    if(window.screen.width < 1980) {
        $('head').append('<meta name="viewport" content="width=1480">')
    } else if(window.screen.width < 1366) {
        $('head').remove('[name="viewport"]')
        $('head').append('<meta name="viewport" content="width=1366">')
    }
    else {
        $('head').remove('[name="viewport"]')
    }
    $(document).ready(function() {
        $('.float-ball').click(function() {
            // 这里添加你的点击事件处理代码
            var id=$(this).attr('data-id')
            if(id==1){
                window.location.href='/kb'
            }else if(id==2){
                window.location.href='/dip'
            }else if(id==3){
                window.location.href='/zz'
            }else if(id==4){
                window.location.href='/iqc'
            }else if(id==5){
                window.location.href='/fqc'
            }else if(id==6){
                window.location.href='/put'
            }else if(id==7){
                window.location.href='/out'
            }else if(id==8){
                window.location.href='/outxs'
            }else if(id==9){
                window.location.href='/ts'
            }else if(id==10){
                window.location.href='/check'
            }
            // switch (id){
            //     case 1:let url='/kb'; window.location.href=url;
            //     case 2:window.location.href='/dip';break;
            //     case 3:window.location.href='/zz';break;
            //     case 4:window.location.href='/iqc';break;
            //     case 5:window.location.href='/fqc';break;
            //     case 6:window.location.href='/put';break;
            //     case 7:window.location.href='/out';break;
            // }
        });
    });
    // 悬浮球点击事件
    $('#floatBall').click(function(){
        // 这里替换成你想要跳转的页面URL
        var url = '/kb';
        // window.location.href=url;
    });
</script>
</html>